/**
 * Created by guangqiang on 2017/12/9.
 */
import React, {Component} from 'react'
import {View, Text, Image, TouchableOpacity, StyleSheet, FlatList, SectionList} from 'react-native'
import { Metrics, Colors, Fonts } from '../Themes'
import { API, WINDOW } from '../Services'
import LdImage from './LdImage'

export default class CategoryList extends Component {

  constructor(props) {
    super(props)
    this._flatList = null
    this._sectionList = null
    this.state = {
      selectedRootCate: 0,
      CateData:[],
      SecondData:[],
    }
  }

  componentDidMount() {
    // 网络请求
    // this._fetch_jcfenlei()
  }

  // _fetch_jcfenlei() {
  //   API.jcfenlei().then((response) => {  
  //     let list = response?.data?.list
  //     if (list) {
  //       this.setState({ CateData: list },()=>this._fetch_getFenlei())
  //     }
  //   })
  // }
  // _fetch_getFenlei() {
  //   console.log(this.state.CateData);
  //   API.getFenlei(this.state.CateData[this.state.selectedRootCate].id).then((response) => {
  //     let list = response?.data?.list
  //     if (list) {
  //       this.setState({ SecondData: list })
  //     }
  //   })
  // }

  _renderItem = ({ index, item})  => {
    return (
      <TouchableOpacity
        key={index}
        style={[{alignItems: 'center', justifyContent: 'center', width: 100, height: 44}, this.state.selectedRootCate === index ? {backgroundColor: '#F5F5F5', borderLeftWidth: 3, borderLeftColor: Colors.mainColor} : {backgroundColor: 'white'}]}
        onPress={() => {
          this.setState({selectedRootCate: index},()=>this._fetch_getFenlei())
        }}
      >
        <Text style={{fontSize: 13, color: this.state.selectedRootCate === index ? Colors.mainColor : Colors.textColor}}>{item.name}</Text>
      </TouchableOpacity>
    )
  }

  renderRootCate() {
    return (
      <View style={{backgroundColor: '#F5F5F5'}}>
        <FlatList
          ref={flatList => this._flatList = flatList}
          data={this.state.CateData}
          ListHeaderComponent={() => (<View/>)}
          ListFooterComponent={() => (<View/>)}
          ItemSeparatorComponent={() => <View style={{height:1, backgroundColor:'#F5F5F5'}}/>}
          renderItem={this._renderItem}
          onEndReachedThreshold={20}
          showsVerticalScrollIndicator={false}
          >
        </FlatList>
      </View>
    )
  }

  sectionComp({section}) {
    return (
      <View style={{justifyContent: 'center', alignItems:'center', paddingVertical:15,flexDirection:'row'}}>
        <View style={{backgroundColor:Colors.separatorColor,height:1,width:40}}/>
        <Text style={{marginHorizontal:10}}>{section.title}</Text>
        <View style={{backgroundColor:Colors.separatorColor,height:1,width:40}}/>
      </View>  
    )
  }

  renderCell(item, index) {
    return (
      <TouchableOpacity
        key={index}
        style={{ height: 110, width: (Metrics.screenWidth - 140) / 3, backgroundColor: 'white', marginBottom: 8, marginRight: 10, alignItems: 'center' }}
        // onPress={() => alert(`点击了第${item.sort}组中的第${index}个商品`)}
      >
        <LdImage
          style={{ width: 60, height: 70, marginVertical: 10 }}
          url={item.image}
        />
        <Text style={{ color: '#333', fontSize: 13 }}>{item.name}</Text>
      </TouchableOpacity>
    )   
  }

  renderItem({ item, index, section }) {
    return index === 0 ?
    <View> 
      {this.sectionComp({section})}
      <View key={item.sort} style={{flexDirection: 'row', flexWrap: 'wrap'}}>
        {section.data.map((cell, index) => this.renderCell(cell, index))}
      </View>
    </View>
      
      : null
  }

  renderItemCate() {
    let tempArr = this.state.SecondData.map((item, index) => {
      let tempObj = {}
      tempObj.title = item.name
      tempObj.data = item.son
      return tempObj
    })
    return (
      <View style={{flex: 1, backgroundColor: '#F5F5F5', marginLeft: 10, marginTop: 8}}>
        <SectionList
          ref={(ref) => this._sectionList = ref}
          renderItem={(data) => this.renderItem(data)}
          sections={tempArr}
          ItemSeparatorComponent={() => <View/>}
          ListHeaderComponent={() => <View/>}
          ListFooterComponent={() => <View/>}
          showsVerticalScrollIndicator={false}
          keyExtractor={(item, index) => 'key' + index + item}
        />
      </View>
    )
  }

  renderCategory() {
    return (
      <View style={{flexDirection: 'row', flex: 1, backgroundColor: '#F5F5F5'}}>
        {this.renderRootCate()}
        {this.renderItemCate()}
      </View>
    )
  }

  render() {
    return (
      <View style={styles.container}>
        {this.renderCategory()}
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  }
})